﻿/*
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@															@
@            不需要可以的张扬,沉默是无声的力量				@
@															@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
!Jquery+Html5实现列表音乐播放器
!欢迎大家一起交流http://kipy.web-183.com
!QQ:19754300&Email:zkipy@163.com
 */
$(function () {
    // 取出所有歌曲信息
    var mp3 = $('#source').text().split(';');
    //每页5首
    var listLength = 5;
    var pages = mp3.length / listLength;
    function loadPages() {
        var pager = $("#pager").empty();
        for (var i = 0; i < pages; i++) {
            pager.append("<div class='pagernum'>" + (i + 1) + "</div>");
        }
    }
    //绑定分页条的效果
    function bindPagerMouseoverAndOut() {
        var pagers = $("#pager div").each(function () {
            $(this).mouseover(function (e) {
                var target = $(e.target);
                var page = target.text();
                loadList(page);
                bindClick();
                bindMouseoverAndOut();
                window.setInterval(autoNext, 10);
                target.attr('class', 'pagernum-click');
                target.siblings().each(function () {
                    $(this).attr('class', 'pagernum');
                })
                
            })
        })
    }
    // 音乐文件路径获取
    function getUrls() {
        var list = new Array();
        // 获取资源字符串
        var source = $('#source').text();
        // 解析字符串
        var infos = source.split(';');
        for (var i = 0; i < infos.length; i++) {
            list.push(infos[i].split(':')[1]);
        }
        return list;
    }
    // 音乐列表歌曲名获取
    function getMp3s() {
        var list = new Array();
        // 获取资源字符串
        var source = $('#source').text();
        // 解析字符串
        var infos = source.split(';');
        for (var i = 0; i < infos.length; i++) {
            list.push(infos[i].split(':')[0]);
        }
        return list;
    }
    // 绘制歌曲列表
    function loadList(page) {
        var Mp3s = getMp3s();
        var start = (page - 1) * listLength;
        var end = (start + listLength) > Mp3s.length ? Mp3s.length : (start + listLength);
        var list = $('#list ul').empty();
        for (var i = start; i < end; i++) {
            list.append(
					"<li>" + Mp3s[i] + '</li>');
        }
    }
    // 绑定click方法
    function bindClick() {
        $('#list ul li').each(function () {
            $(this).click(function (e) {
                // 获取当前行歌名
                var name = $(e.target).text();
                // 获取歌名列表
                var names = getMp3s();
                // 获取路径列表
                var list = getUrls();
                // 取出当前歌名对应URL
                for (var i = 0; i < mp3.length; i++) {
                    // 查找当前歌名index
                    if (names[i] == name) {
                        // 根据index找到url进行换歌
                        change(list[i]);
                    }
                }
            })
        });
    }
    // 绑定鼠标mouseover高亮 mouseout恢复
    function bindMouseoverAndOut() {
        /* 功能未实现 */
        $('#list ul li').each(function () {
            $(this).mouseover(function (e) {
                // 获得激活动作的对象
                var target = $(e.target);
                target.attr('class', 'list-mon');
            })
        });
        $('#list ul li').each(function () {
            $(this).mouseout(function (e) {
                // 获得激活动作的对象
                var target = $(e.target);
                target.attr('class', 'list-mout');
            })
        });
    }

    // 换歌
    function change(url) {
        $('#player').attr('src', url);
    }

    // 获取当前播放歌曲的index
    function getCurIndex() {
        var index;
        for (var i = 0; i < mp3.length; i++) {
            if (getUrls()[i] == $('#player').attr('src')) {
                index = i;
            }
        }
        return index;
    }

    // 下一首
    function next() {
        change(getUrls()[getCurIndex() + 1]);
    }

    // 上一首
    function last() {
        change(getUrls()[getCurIndex() - 1]);
    }

    // 自动下一首
    function autoNext() {
        // 此处的播放器对象不能使用JQUERY取出 JQUERY取出的对象是JQUERY对象无法调用ended方法
        if (document.getElementById('player').ended && getCurIndex() < mp3.length -1) {
            next();
        } else if (document.getElementById('player').ended && getCurIndex() == mp3.length - 1) {
            //实现循环播放
            change(getUrls()[0]);
        }
        // 换歌之后更新正在播放信息
        $('#playing').html('Now Playing:   ' + getMp3s()[getCurIndex()]);
    }

    function play() {
        if ($('#source') != undefined && $('#source').text() != "") {
            // 切换到第一首
            change(getUrls()[0]);
            // 开启自动下一首,检测时间10毫秒
            window.setInterval(autoNext, 10);
            // 加载播放列表
            loadList(1);
            loadPages();
            bindPagerMouseoverAndOut();
            // 为列表添加换歌功能
            bindClick();
            bindMouseoverAndOut();
            //IE播放列表DIV宽度自适应
            if ($.browser.msie) {
                //列表宽度532像素
                $('#main').attr('style', 'background-color: gray; width: 532px');
            }
        }
    }
    play();
});